<!-- subpkg_consult/payment/index.vue -->
<script lang="ts" setup>
  import { createOrderApi, orderPayApi, preOrderApi } from '@/pages/apis/consult'
  import { patientDetailApi } from '@/pages/apis/patient'
  import { useConsultStore } from '@/stores/consult'
  import type { CustomPaymentInstance } from '@/types/components'
  import type { OrderPreData } from '@/types/consult'
  import type { PatientItem } from '@/types/patient'
  import { ref } from 'vue'

  const store = useConsultStore()

  const preOrderInfo = ref<OrderPreData>()
  // 获取预下单信息
  const getData = async () => {
    const res = await preOrderApi({
      type: store.type,
      illnessType: store.illnessType,
    })
    preOrderInfo.value = res
  }
  getData()

  // 获取患者信息
  const patientDetail = ref<PatientItem>()

  const getPatientDetail = async () => {
    const res = await patientDetailApi(store.patientId)
    patientDetail.value = res
  }
  getPatientDetail()

  const orderId = ref('')
  const onSubmit = async () => {
    if (orderId.value !== '') {
      return uni.showToast({
        title: '订单不能重复创建！',
      })
    }
    const res = await createOrderApi({
      type: store.type,
      illnessType: store.illnessType,
      patientId: store.patientId,
      depId: store.depId,
      ...store.illnessInfo,
    })
    orderId.value = res.id
    uni.showToast({ title: '订单id' + res.id, icon: 'none' })

    paymentRef.value?.open()
  }

  // 立即支付
  const payNow = async (index: number) => {
    if (index === 0) {
      uni.showToast({ title: '暂未开通该支付方式', icon: 'none' })
      return
    }
    uni.showLoading({ title: '支付中...' })
    // 支付宝
    const res = await orderPayApi({
      orderId: orderId.value,
      paymentMethod: index,
      payCallback: 'http://localhost:5173/#/subpkg_consult/room/index',
    })
    uni.hideLoading()
    // #ifdef H5
    location.href = res.payUrl
    // #endif
  }
  // 关闭支付
  const closePayment = async () => {
    const res = await uni.showModal({
      title: '关闭支付',
      content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
      cancelText: '仍要关闭',
      cancelColor: '#848484',
      confirmText: '继续支付',
      confirmColor: '#16C2A3',
    })

    if (res.confirm) {
      paymentRef.value?.close()
    }
    if (res.cancel) {
      // 清空 store 信息，先注释掉，方便测试
      store.clear()
      uni.reLaunch({ url: '/pages/index/index' })
    }
  }

  const paymentRef = ref<CustomPaymentInstance>()

  // 支付
</script>

<template>
  <scroll-view v-if="preOrderInfo">
    <view class="payment-page">
      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊 ${preOrderInfo.payment}`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${preOrderInfo.couponDeduction}`"
          />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ preOrderInfo.pointDeduction }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ preOrderInfo.actualPayment }}</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>

      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="患者资料">
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray"
                >{{ patientDetail?.name }} | {{ patientDetail?.genderValue }} |
                {{ patientDetail?.age }}岁
              </view>
            </template>
          </uni-list-item>
          <uni-list-item border title="病情描述" :note="store.illnessInfo.illnessDesc" />
        </uni-list>
      </uni-section>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
      </view>
      <button class="uni-button" @click="onSubmit">立即支付</button>
    </view>
    <!-- 全局支付组件 -->
    <custom-payment
      @confirm="payNow"
      @close="closePayment"
      ref="paymentRef"
      :orderId="orderId"
      :amount="preOrderInfo.actualPayment"
    />
  </scroll-view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
